import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ExternalLink, Filter } from 'lucide-react';

const Portfolio = () => {
  const [activeFilter, setActiveFilter] = useState('All');
  const [selectedProject, setSelectedProject] = useState(null);
  const [isWideScreen, setIsWideScreen] = useState(true);

  const filters = ['All', '内容生态', '变现工具', '专业服务', '资本支持'];

  const projects = [
    {
      id: 1,
      title: '内容社区',
      category: '内容生态',
      description: '社区拥有源源不断精彩内容，采用智能推荐算法，个性化推荐优质内容',
      image: 'https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?w=600&h=400&fit=crop&crop=center',
      results: '同时提供组件能力，可实现任务推广、商品购买，增加变现路径，提升变现效率',
      tech: ['智能推荐', '内容生态', '个性化服务']
    },
    {
      id: 2,
      title: '任务集市',
      category: '变现工具',
      description: '汇聚海量变现任务，涵盖小程序、小说推文、影视短剧、APP推广等多种类型',
      image: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?w=600&h=400&fit=crop&crop=center',
      results: '专业BD团队持续引入行业高佣任务',
      tech: ['任务分发', '多类型任务', '高佣金']
    },
    {
      id: 3,
      title: '商品资源库',
      category: '变现工具',
      description: '聚集国内知名电商平台海量商品，专业BD团队持续引入行业高佣商品和品牌商',
      image: 'https://images.unsplash.com/photo-1522199755839-a2bacb67c546?w=600&h=400&fit=crop&crop=center',
      results: '提供多样化商品选择，助力创作者变现',
      tech: ['电商资源', '高佣商品', '品牌合作']
    },
    {
      id: 4,
      title: '专业陪跑教学',
      category: '专业服务',
      description: '专业导师保姆式带教，提供热门内容创作与高效变现的专业教学服务',
      image: 'https://images.unsplash.com/photo-1521791136064-7986c2920216?w=600&h=400&fit=crop&crop=center',
      results: '个性化数据分析模型助力用户精准定位内容方向',
      tech: ['专业指导', '数据分析', '内容定位']
    },
    {
      id: 5,
      title: 'MCN机构',
      category: '专业服务',
      description: '专业IP操盘手团队，孵化个人商业IP，提供优质达人资源对接',
      image: 'https://images.unsplash.com/photo-1553877522-43269d4ea984?w=600&h=400&fit=crop&crop=center',
      results: '全方位IP打造与商业变现服务',
      tech: ['IP孵化', '达人资源', '商业变现']
    },
    {
      id: 6,
      title: '资本引入',
      category: '资本支持',
      description: '产业MCN矩阵扶持，助力内容产业资本化',
      image: 'https://images.unsplash.com/photo-1559526324-4b87b5e36e44?w=600&h=400&fit=crop&crop=center',
      results: '提供资金支持与资源对接，加速内容创作者成长',
      tech: ['资本扶持', '资源对接', '产业赋能']
    }
  ];

  const filteredProjects = activeFilter === 'All' 
    ? projects 
    : projects.filter(project => project.category === activeFilter);

  // 处理标签切换
  const handleFilterClick = (filter) => {
    setActiveFilter(filter);
  };

  return (
    <section id="portfolio" className="py-24 bg-slate-50">
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          className="text-center mb-16"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
        >
          <h2 className="text-4xl md:text-5xl font-bold text-zinc-900 mb-6">
            平台 &
            <span className="text-[#345aff]"> 生态体系</span>
          </h2>
          <p className="text-xl text-zinc-600 max-w-3xl mx-auto">
            抖推猫通过布局多元业务，业务细分场景拓展，打造出完整的业务生态闭环
          </p>
        </motion.div>

        {/* 筛选按钮 - 全屏显示不限制宽度 */}
        <motion.div
          className={`flex flex-wrap justify-center ${isWideScreen ? 'w-full' : 'gap-4'} mb-12`}
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.2 }}
        >
          {filters.map((filter) => (
            <motion.button
              key={filter}
              onClick={() => handleFilterClick(filter)}
              className={`px-6 py-3 font-medium transition-all duration-300 ${
                activeFilter === filter
                  ? 'bg-blue-700 text-white'
                  : 'bg-white text-zinc-600 hover:bg-slate-100 hover:text-blue-700'
              } ${isWideScreen ? 'flex-1 min-w-[150px]' : ''}`}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <Filter className="w-4 h-4 inline mr-2" />
              {filter === 'All' ? '全部' : 
               filter === '内容生态' ? '内容生态' : 
               filter === '变现工具' ? '变现工具' : 
               filter === '专业服务' ? '专业服务' : '资本支持'}
            </motion.button>
          ))}
        </motion.div>

        {/* 项目网格 - 全屏显示不限制宽度 */}
        <motion.div
          className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 ${isWideScreen ? 'w-full' : ''}`}
          layout
        >
          <AnimatePresence>
            {filteredProjects.map((project) => (
              <motion.div
                key={project.id}
                className="group bg-white overflow-hidden transition-all duration-300 cursor-pointer"
                layout
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.9 }}
                whileHover={{ y: -8 }}
                onClick={() => setSelectedProject(project)}
              >
                <div className="relative overflow-hidden">
                  <img
                    src={project.image}
                    alt={project.title}
                    className="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500"
                    loading="lazy"
                    decoding="async"
                    width="600"
                    height="400"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <div className="absolute bottom-4 left-4 right-4">
                      <div className="flex items-center text-white">
                        <ExternalLink className="w-5 h-5 mr-2" />
                        <span className="font-medium">查看详情</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="p-6">
                  <div className="flex items-center justify-between mb-3">
                    <span className="px-3 py-1 bg-blue-100 text-blue-700 text-sm font-medium">
                      {project.category === '内容生态' ? '内容生态' : 
                       project.category === '变现工具' ? '变现工具' : 
                       project.category === '专业服务' ? '专业服务' : '资本支持'}
                    </span>
                  </div>

                  <h3 className="text-xl font-bold text-zinc-900 mb-3 group-hover:text-blue-700 transition-colors duration-300">
                    {project.title}
                  </h3>

                  <p className="text-zinc-600 mb-4 line-clamp-2">
                    {project.description}
                  </p>

                  <div className="flex flex-wrap gap-2 mb-4">
                    {project.tech.map((tech) => (
                      <span
                        key={tech}
                        className="px-2 py-1 bg-slate-100 text-slate-600 text-xs font-medium"
                      >
                        {tech}
                      </span>
                    ))}
                  </div>

                  <div className="text-sm font-semibold text-cyan-600">
                    {project.results}
                  </div>
                </div>
              </motion.div>
            ))}
          </AnimatePresence>
        </motion.div>

        {/* 项目模态框 */}
        <AnimatePresence>
          {selectedProject && (
            <motion.div
              className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setSelectedProject(null)}
            >
              <motion.div
                className="bg-white w-full max-h-[90vh] overflow-y-auto"
                initial={{ scale: 0.9, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                exit={{ scale: 0.9, opacity: 0 }}
                onClick={(e) => e.stopPropagation()}
              >
                <img
                  src={selectedProject.image}
                  alt={selectedProject.title}
                  className="w-full h-64 object-cover"
                  loading="lazy"
                  decoding="async"
                  width="600"
                  height="400"
                />
                <div className="p-8">
                  <h3 className="text-2xl font-bold text-zinc-900 mb-4">
                    {selectedProject.title}
                  </h3>
                  <p className="text-zinc-600 mb-6">
                    {selectedProject.description}
                  </p>
                  <div className="mb-6">
                    <h4 className="font-semibold text-zinc-900 mb-2">成果：</h4>
                    <p className="text-cyan-600 font-medium">{selectedProject.results}</p>
                  </div>
                  <div className="mb-6">
                    <h4 className="font-semibold text-zinc-900 mb-2">技术：</h4>
                    <div className="flex flex-wrap gap-2">
                      {selectedProject.tech.map((tech) => (
                        <span
                          key={tech}
                          className="px-3 py-1 bg-blue-100 text-blue-700 text-sm font-medium"
                        >
                          {tech}
                        </span>
                      ))}
                    </div>
                  </div>
                  <button
                    onClick={() => setSelectedProject(null)}
                    className="w-full bg-blue-700 text-white py-3 font-semibold hover:bg-blue-800 transition-colors duration-200"
                  >
                    关闭
                  </button>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </section>
  );
};

export default Portfolio;